﻿@model PicStore.Web.Models.Apply.AddRequestModel
@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@using (Html.BeginForm("Add", "Apply", FormMethod.Post, new { id = "AddRequestForm", @class = "form-horizontal" }))
{
    <div class="modal-header">
        <h3>Create request to download pictures.</h3>
    </div>
    @Html.DisplayTextFor(model => model.Error)

    @Html.ValidationSummary(true)
    <div class="control-group">
        @Html.LabelFor(model => model.CreateTime, new { @class = "control-label" })
        <div class="controls">
            @Html.DisplayTextFor(model => model.CreateTime)<br/>
            @Html.ValidationMessageFor(model => model.CreateTime)
        </div>
    </div>

    <div class="control-group">
        @Html.LabelFor(model => model.Department, new { @class = "control-label" })
        <div class="controls">
            @Html.EditorFor(model => model.Department)<br/>
            @Html.ValidationMessageFor(model => model.Department)
        </div>
    </div>
        
    <div class="control-group">
        @Html.LabelFor(model => model.RequestUserName, new { @class = "control-label" })
        <div class="controls">
            @Html.EditorFor(model => model.RequestUserName)<br/>
            @Html.ValidationMessageFor(model => model.RequestUserName)
        </div>
    </div>
        
    <div class="control-group">
        @Html.LabelFor(model => model.Phone, new { @class = "control-label" })
        <div class="controls">
            @Html.EditorFor(model => model.Phone)<br/>
            @Html.ValidationMessageFor(model => model.Phone)
        </div>
    </div>
        
    <div class="control-group">
        @Html.LabelFor(model => model.Mobile, new { @class = "control-label" })
        <div class="controls">
            @Html.EditorFor(model => model.Mobile)<br/>
            @Html.ValidationMessageFor(model => model.Mobile)
        </div>
    </div>
    
    <div class="control-group">
        @Html.LabelFor(model => model.NeedDownloadPicture, new { @class = "control-label" })
        <div class="controls">
            @Html.CheckBoxFor(model => model.NeedDownloadPicture)<br/>
            @Html.ValidationMessageFor(model => model.NeedDownloadPicture)
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Choose Picture's Date:</label>
        <div class="controls">
            From: <input type="text" class="span2" data-bind="datepicker: fromDate" data-date-format="yyyy-mm-dd" id="dpfrom" name="dpFrom">
            &nbsp;To:<input type="text" class="span2" data-bind="datepicker: toDate" data-date-format="yyyy-mm-dd" id="dpTo" name="dpTo">
        </div>
    </div>
    @Html.HiddenFor(m => m.StartDate)
    @Html.HiddenFor(m => m.EndDate)
    
    <div class="control-group">
        @Html.LabelFor(model => model.SexList, new { @class = "control-label" })
        <div class="controls">
            @{
                if (Model != null)
                {
                    foreach (var sex in Model.SexList)
                    {
                        <input type="checkbox" value="@sex.Value" name="SexValue" checked="checked" />
                        @sex.Text
                        <br />
                    }
                }
            }
        </div>
    </div>
    
    <div class="control-group">
        @Html.LabelFor(model => model.PlaceList, new { @class = "control-label" })
        <div class="controls">
            @{
                if (Model != null)
                {
                    foreach (var place in Model.PlaceList)
                    {
                        <input type="checkbox" value="@place.Value" name="PlaceValue" /> @place.Text <br />
                    }
                }
            }
        </div>
    </div>

    <div class="control-group">
        @Html.LabelFor(model => model.Project, new { @class = "control-label" })
        <div class="controls">
            @Html.EditorFor(model => model.Project)<br/>
            @Html.ValidationMessageFor(model => model.Project)
        </div>
    </div>
    <div class="control-group">
        @Html.LabelFor(model => model.Comments, new { @class = "control-label" })
        <div class="controls">
            @Html.TextAreaFor(model => model.Comments)<br/>
            @Html.ValidationMessageFor(model => model.Comments)
        </div>
    </div>

    <input type="submit" class="btn btn-primary" value="Save" onclick="return BeforeSubmit();" />
}
<script type="text/javascript">
    ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().datepickerOptions || {};
            $(element).datepicker(options).on("changeDate", function (ev) {
                var observable = valueAccessor();
                observable(ev.date);
            });
        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).datepicker("setValue", value);
        }
    };

    ko.extenders.required = function (target, overrideMessage) {
        //add some sub-observables to our observable
        target.hasError = ko.observable();
        target.validationMessage = ko.observable();

        //define a function to do validation
        function validate(newValue) {
            target.hasError(newValue ? false : true);
            target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
        }

        //initial validation
        validate(target());

        //validate whenever the value changes
        target.subscribe(validate);

        //return the original observable
        return target;
    };
    
    function ViewModel() {
        var self = this;

        // 设置默认日期
        self.fromDate = ko.observable(new Date()).extend({ required: "" });
        self.toDate = ko.observable(new Date()).extend({ required: "" });
    }
    
    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);

    function BeforeSubmit() {
        var val = $('input:checkbox[name="PlaceValue"]:checked').val();
        if (val == null) {
            alert("Please select at least one place!");
            return false;
        }
        
        var val = $('input:checkbox[name="SexValue"]:checked').val();
        if (val == null) {
            alert("Please select at least one sex!");
            return false;
        }
        
        var startDate = $('#dpfrom').val();
        if (startDate == null || startDate == '') {
            alert("Please select start date!");
            return false;
        }
        
        var endDate = $('#dpTo').val();
        if (endDate == null || endDate == '') {
            alert("Please select end date!");
            return false;
        }
        
        if (startDate > endDate) {
            alert("Start date cannot be greater than end date!");
            return false;
        }
        
        $('#StartDate').val(startDate);
        $('#EndDate').val(endDate);
    }
</script>
